<template>
  <PageWrapper :contentStyle="{ margin: 0 }" contentBackground>
    <div class="ant-modal-confirm-title">
      <a class="addmoneyText">{{ t('广告报表密码') }} </a>
    </div>
    <div class="step-form">
      <BasicForm @register="registerPassword" />
      <div class="step-buton">
        <Button type="primary" @click="createClick" :size="FORM_SIZE">{{
          t('component.modal.okText')
        }}</Button>
      </div>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import { Button } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicForm, useForm } from '/@/components/Form';
  import { schemasPassword } from './logRoiPwd.data';
  import { useFormSetting } from '/@/hooks/setting/useFormSetting';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { roiPwdVerify } from '/@/api/sys/user';
  import eventBus from '/@/utils/eventBus';

  const { t } = useI18n();
  const { createMessage } = useMessage();
  const { getFormSize } = useFormSetting();
  const FORM_SIZE = getFormSize as any;

  /** 验证ROI登陆密码 */
  const [registerPassword, { validate }] = useForm({
    schemas: schemasPassword,
    showActionButtonGroup: false,
    labelWidth: 100,
    baseColProps: { span: 24 },
  });

  async function createClick() {
    const values = await validate();
    if (!values) return;
    try {
      const { data } = await roiPwdVerify(values);
      if (data) {
        sessionStorage.setItem('logRoiPwd', 'true');
        eventBus.emit('closeModal');
      } else {
        createMessage.error('密码错误，请重新输入');
      }
    } catch (error) {
      console.error('密码校验错误，请重新输入');
    }
  }
</script>

<style lang="less">
  .addCreat .ant-modal-confirm-title {
    margin-bottom: 30px;
    padding: 17.5px 17.5px 17.5px 20px;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 4px 4px 0 0;
    background-color: #1475e1 !important;
    color: rgb(0 0 0 / 85%);
    font-size: 18px;
    line-height: 24px;

    .addmoneyText {
      height: 25px !important;
      padding-right: 16px;
      color: #fff !important;
      font-weight: 600 !important;
      line-height: 25px !important;
    }
  }
</style>
<style lang="less" scoped>
  .step-form {
    width: 400px;
    margin: auto;
  }

  .step-buton {
    width: 400px;
    margin-top: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
  }
</style>
